<template>
  <div class="activatePop">
    <!--商品信息-->
    <div class="pannel goods" v-for="(item,index) in redisInfo" :key="index">
      <div class="pic">
        <a href="#"><img src="../../assets/member.png" alt="" /> </a>
      </div>
      <div class="info">
        <h5>{{ item.packageName }}</h5>
        <p><span>{{ item.paymentWay }}</span></p>
        <div class="price">
          <!-- <span class="red">￥<i>1999</i></span> -->
          <span>￥{{ item.paymentMoney }}</span>
        </div>
      </div>
      <div class="count">
        <i class="iconfont icon-x"></i>
        <span>1</span>
      </div>
    </div>

  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import { mapGetters } from 'vuex'
export default {
  name: 'OrderPage',
  components: {},
  data() {
    return {
      activatePopShow: false,
      confirmLoading: false,
      redisInfo:[],
    }
  },

  created() {},

  mounted() {
    this.orderList()
  },
  methods: {
    ...mapGetters(['userInfo']),
    orderList() {
      console.log('userInfo', this.userInfo())
      let id = this.userInfo().id
      getAction('/order/listOrder', { userId: id })
        .then((res) => {
          console.log('pay', res)
          this.redisInfo = res.result.records
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
    close() {
      this.activatePopShow = false
    },
    generatedBtnProp() {
      let obj = {
        role: this.models.role,
        contractType: this.models.contractType,
        content: this.models.content,
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('appApiAsk', 1, obj)
        } else {
          this.$emit('appApiAsk', 2, obj)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.message-text {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}
.loading {
  width: 50px;
  height: 50px;
  border: 2px solid #1890ff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: rotate 0.75s linear infinite;
  float: right;
  margin-left: 4px;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

.goods{
    display: flex;
    padding: 11px 0 11px 11px;
    background: white;
    margin-bottom:12px;
}
.goods .pic{
    width: 85px;
    height: 85px;
    margin-right: 10px;
    img{
      width: 100%;
    }
}
.goods .info{
    flex: 1;
}
.goods .info h5{
    font-size: 13px;
    color: #262626;
    font-weight: 400;
}
 
.goods .info p{
  width: 74px;
    line-height: 20px;
    margin: 5px 0;
    font-size: 12px;
    color: white;
    background: #58d258;
    text-align: center;
}
.goods .info span:first-child{
    margin-right: 5px;
}
.goods .info .price{
    font-size: 12px;
}
.goods .info .price i{
    font-size: 16px;
}
.goods .info .price span:last-child{
    margin-left: 5px;
    color: red;
    font-size: 16px;
    font-weight: bold;
    // text-decoration: line-through;
}

.goods .count{
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 44px;
}
</style>